<template>
  <el-carousel indicator-position="outside" :autoplay="false" height="450px">
    <el-carousel-item v-for="(item, index) in templates" :key="index">
      <AppTemplate :template="item"/>
    </el-carousel-item>
  </el-carousel>
  <div class="sep-v-small"/>
  <div class="row justify-center">
    <el-button type="success">下载</el-button>
  </div>
</template>

<script>
import AppTemplate from './AppTemplate'
import templates from './templates'

export default {
  components: { AppTemplate },
  name: 'AppTemplateList',
  props: {
  },
  data: ()=>{
    return {
      templates
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  box-sizing: border-box;
  margin: 10px 10%;
  border: 1px solid black;
  border-radius: 20px;
  overflow: hidden;

  .section {
    overflow: hidden;
  }
  .template-img {
    img {
      width: 100%;
    }
  }
  .title { 
    text-align: right;
  }
  .content {
    text-align: left;
  }
  .bordered {
    border: 1px dotted gray;
  }
}
</style>
